{extend name='public/base' /}

{block name="content"}
<style type="text/css">

    .banjies{
        color: #ffffff;
        font-size: 14px;
        background-color: #2d8cf0;
        padding: 3px;
        width: 60px;
        border-radius: 5px;
        text-align: center;
        line-height: 24px;
        display: inline-block;
    }
    .tanchu{
        position: absolute;
        top: 170px;
        left: 440px;
        background-color: #fff;
        border: #ccc solid 1px;
        width: 230px;
        border-radius: 10px;
    }
</style>
<div class="layui-col-md12">

    <div class="layui-card">
        <div class="layui-card-body">
            <form action="" class="layui-form" method="get">
                <div class="layui-form-item layui-form-pane">
                    <div class="layui-inline">
                        <label class="layui-form-label">商户：</label>
                        <div class="layui-input-inline">
                            <select name="merchant_id"  lay-search="" id="merchant_id">
                                <option value="" ></option>
                                {volist name="merchant_list" id="t"}
                                {if empty($t.name)||$t.name=='-'}
                                <option value="{$t.id}" >{$t.company} - {$t.code}-{$t.biz_state}-{$t.positions_code}</option>
                                {else/}
                                <option value="{$t.id}" >{$t.name} - {$t.code}-{$t.biz_state}-{$t.positions_code}</option>
                                {/if}
                                {/volist}
                            </select>
                        </div>
                    </div>
                    <!-- <div class="layui-inline">
                        <label class="layui-form-label">日期</label>
                        <div class="layui-inline" id="test6">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" name="startDate" id="startDate" class="layui-input" placeholder="日期">
                            </div>
                        </div>
                    </div> -->
                    <div class="layui-inline">
                        <label class="layui-form-label">分组：</label>
                        <div class="layui-input-inline">
                            <select name="section_id" >
                                <option value="" >请选择</option>
                                <option value="1" >营运一部</option>
                                <option value="2" >营运二部</option>
                                <option value="3" >营运三部</option>
                                <option value="4" >分期</option>
                                <option value="5" >诉讼</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="overflow: inherit;">品牌负责人：</label>
                        <div class="layui-input-inline">
                            <select name="principal_id"  lay-search="" id="principal_id">
                                <option value="" ></option>
                                {volist name="perList" id="t"}
                                <option value="{$t.id}" >{$t.nickname}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
					<div class="layui-inline">
					    <label class="layui-form-label">类型</label>
					    <div style="display: flex;align-items: center;" id="genres">
							<div style="width: 50px;height: 36px;text-align: center;line-height: 36px;border-top: 1px solid #e6e6e6 !important;border-bottom: 1px solid #e6e6e6 !important;background-color: #2d8cf0;color: #fff;" id="month">月</div>
							<div style="width: 50px;height: 36px;text-align: center;line-height: 36px;border: 1px solid #e6e6e6 !important;" id="quarter">季度</div>
							<div style="width: 50px;height: 36px;text-align: center;line-height: 36px;border-top: 1px solid #e6e6e6 !important;border-bottom: 1px solid #e6e6e6 !important;border-right: 1px solid #e6e6e6 !important;" id="year">年</div>
						</div>
					</div>
					<div class="layui-inline" id="mons" style="display: block;">
					    <label class="layui-form-label">月份选择</label>
					    <div class="layui-inline" id="test6">
					        <div class="layui-input-inline">
								 <input type="text" class="layui-input" id="test1" placeholder="请选择月份" autocomplete="off" name="test1">
					        </div>
					    </div>
					</div>
					<div class="layui-inline" id="yyds" style="display: none;">
					    <label class="layui-form-label">年份选择</label>
					    <div class="layui-inline" id="test6">
					        <div class="layui-input-inline">
								 <input type="text" class="layui-input" id="test" placeholder="请选择年份" autocomplete="off" name="test">
					        </div>
					    </div>
					</div>
					  <div class="layui-form-item" id="quarts" style="display: none;">
						  <div style="display: flex;">
							  <label class="layui-form-label">季度</label>
							<div class="layui-inline" id="test6" style="margin-right: 0 !important;" >
								<div class="layui-input-inline" style="margin-right: 0 !important;">
									 <input type="text" class="layui-input" id="test2" placeholder="请选择年份" autocomplete="off" name="test2">
								</div>
							</div>
							<div class="layui-input-block" style="margin-left: 0 !important;">
							  <select name="interest" lay-filter="aihao" id="bookYear">
								<option value="0">第一季度</option>
								<option value="1">第二季度</option>
								<option value="2">第三季度</option>
								<option value="3">第四季度</option>
							  </select>
							</div>
						  </div>
					    
					  </div>
					
					
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn layui-btn-sm" data-id="table_id" lay-filter="search" lay-submit="">
                            <i class="layui-icon"></i>搜索
                        </button>
                        <button type="reset" class="layui-btn icon-btn layui-btn-normal layui-btn-sm"><i class="layui-icon layui-icon-refresh"></i>{:__('Reset')}</button>
                        <button class="{:node('OwnerMerchant/export')} layui-btn layui-bg-black iconfont icon-daochu layui-btn-sm" lay-submit id="export" >导出</button>
                        <!-- id="export" -->
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div style="display: flex;align-items: center">
        <div id ="zong" style="margin: 0 20px">总应收:{$all_data.all_money}元</div>
        <div id ="shijiao" style="margin: 0 20px">总实收:{$all_data.all_shi}元</div>
        <div id ="qiankuan" style="margin: 0 20px">总欠费:{$all_data.all_qian}元</div>
        <div id ="jiaonalv" style="margin: 0 20px">总收缴率:{$all_data.all_jiaona}</div>
    </div>
    <div class="layui-card" style="margin-top: 16px;">
        <div class="layui-card-body">
            <table class="layui-hide" id="table_id" lay-filter="table_id"></table>
        </div>
    </div>
    <div style="display: none">
        <table id="table">
        </table>
    </div>
</div>
<div>


</div>




{/block}

{block name="js"} <!--js处理区-->
<script>
    layui.use(['element', 'table', 'form', 'jquery', 'excel','lucky', 'opTable','laydate'], function () {
        var excel = layui.excel;
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var lucky = layui.lucky;
        var opTable = layui.opTable;
        var laydate = layui.laydate;
        form.render();
        // laydate.render({
        //     elem: '#startDate'
        //     ,type: 'month',
        //     range:"~"
        // });
		$('#month').on('click',function () {
		    document.getElementById("month").style.backgroundColor ="#1c7cff";
			document.getElementById("quarter").style.backgroundColor ="#fff";
			document.getElementById("year").style.backgroundColor ="#fff";
			document.getElementById("month").style.color ="#fff";
			document.getElementById("quarter").style.color ="#000";
			document.getElementById("year").style.color ="#000";
			document.getElementById("mons").style.display ="block";
			document.getElementById("yyds").style.display ="none";
			document.getElementById("quarts").style.display ="none";
			laydate.render({
			  elem: '#test1'
			  ,type: 'month'
			});
			var objone ={
				startDate:'',
				page:1,
				limit:20,
				principal_id:'',
				section_id:'',
				time_type:1,
				merchant_id:''
			}
			lucky.CreateSearch(objone);
		    $.ajax({
		        url:"{:url('getInfo')}",
		        type:"post",
		        data: objone,
		        dataType:"json",
		        success:function(res){
		            $('#zong').html("总应收:"+res.data.all_money)
		            $('#shijiao').html("总实收:"+res.data.all_shi)
		            $('#qiankuan').html("总欠费:"+res.data.all_qian)
		            $('#jiaonalv').html("总收缴率:"+res.data.all_jiaona)
		        }
		    });
			return false;
		});
		$('#quarter').on('click',function () {
		    document.getElementById("month").style.backgroundColor ="#fff";
			document.getElementById("quarter").style.backgroundColor ="#1c7cff";
			document.getElementById("year").style.backgroundColor ="#fff";
			document.getElementById("month").style.color ="#000";
			document.getElementById("quarter").style.color ="#fff";
			document.getElementById("year").style.color ="#000";
			document.getElementById("yyds").style.display ="none";
			document.getElementById("mons").style.display ="none";
			document.getElementById("quarts").style.display ="block";
			var currentDate = new Date();
			var month = currentDate.getMonth() + 1;
			var monthString = month.toLocaleString();
			console.log(monthString,'这是本月');
			if(monthString=='01'||monthString=='02'||monthString=='03'){
				$('#bookYear').val('0')
				form.render('select');
			}else if(monthString=='04'||monthString=='05'||monthString=='06'){
				$('#bookYear').val('1')
				form.render('select');
			}else if(monthString=='07'||monthString=='08'||monthString=='09'){
				$('#bookYear').val('2')
				form.render('select');
			}else if(monthString=='10'||monthString=='11'||monthString=='12'){
				$('#bookYear').val('3')
				form.render('select');
			}
			laydate.render({
			  elem: '#test2'
			  ,type: 'year'
			});
			var objone ={
				startDate:'',
				page:1,
				limit:20,
				principal_id:'',
				section_id:'',
				time_type:2,
				merchant_id:''
			}
			lucky.CreateSearch(objone);
		    $.ajax({
		        url:"{:url('getInfo')}",
		        type:"post",
		        data: objone,
		        dataType:"json",
		        success:function(res){
		            console.log(res,'选了楼层')
		            $('#zong').html("总应收:"+res.data.all_money)
		            $('#shijiao').html("总实收:"+res.data.all_shi)
		            $('#qiankuan').html("总欠费:"+res.data.all_qian)
		            $('#jiaonalv').html("总收缴率:"+res.data.all_jiaona)
		        }
		    });
			return false;
		});
		$('#year').on('click',function () {
		    document.getElementById("month").style.backgroundColor ="#fff";
			document.getElementById("quarter").style.backgroundColor ="#fff";
			document.getElementById("year").style.backgroundColor ="#1c7cff";
			document.getElementById("month").style.color ="#000";
			document.getElementById("quarter").style.color ="#000";
			document.getElementById("year").style.color ="#fff";
			document.getElementById("yyds").style.display ="block";
			document.getElementById("mons").style.display ="none";
			document.getElementById("quarts").style.display ="none";
			laydate.render({ 
			  elem: '#test'
			  ,type: 'year'
			});
			var objone ={
				startDate:'',
				page:1,
				limit:20,
				principal_id:'',
				section_id:'',
				time_type:3,
				merchant_id:''
			}
		    $.ajax({
		        url:"{:url('getInfo')}",
		        type:"post",
		        data: objone,
		        dataType:"json",
		        success:function(res){
		            $('#zong').html("总应收:"+res.data.all_money)
		            $('#shijiao').html("总实收:"+res.data.all_shi)
		            $('#qiankuan').html("总欠费:"+res.data.all_qian)
		            $('#jiaonalv').html("总收缴率:"+res.data.all_jiaona)
		        }
		    });
			lucky.CreateSearch(objone);
			return false;
		});


        $('#join').on('click',function () {
            // console.log('弹层该出现了')
            document.getElementById("tanchu").style.display ="block";
        });
        form.on('submit(exit)', function (obj) {
            // console.log('点击关闭')
            document.getElementById("tanchu").style.display ="none";
        });


        //导出事件
        $('#export').on('click',function () {
            var startDate = $('#startDate').val() ;
            var url = "{:url('export')}"+'?export=' + 1;
            window.open(url);
        });

        //导出时阻止页面刷新
        $(".layui-form").submit(function (e) {
            e.preventDefault();
        })
        var myTables = table.render({
            elem: '#table_id',
            url: "{:url('index')}",
			 where: { time_type: 1 }, 
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            // defaultToolbar: ['exports'],
            even: true, //开启隔行背景
            id: 'table_id',
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'last'] //自定义分页布局
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , limit: 20
                , limits: [10, 20, 30, 50]
            },
            // height: 'full-100',100',
            text: {
                none: '暂无相关数据'
            },
            cols:  [[ //标题栏
                {field: 'XH', title: '序号', width: 80, rowspan: 2,fixed: true} //rowspan即纵向跨越的单元格数
                ,{field: 'pinpai', title: '分组负责人', width: 100, rowspan: 2,fixed: true}
                ,{field: 'fenzu', title: '品牌负责人', width: 300}
                ,{field: 'name', title: '品牌名', width: 80, rowspan: 2}
                ,{field: 'tenant_name', title: '签约商户', width: 100, rowspan: 2}
                ,{field: 'owner_cost', title: '欠费(元)', minWidth: 180,rowspan: 2 ,sort:true} //colspan即横跨的单元格数，这种情况下不用设置field和width
                ,{field: 'costAll', title: '应收(元)', minWidth: 90,rowspan: 2,sort:true} //colspan即横跨的单元格数，这种情况下不用设置field和width
                ,{field: 'pay_cost', title: '实收（元）', minWidth: 100,rowspan: 2,sort:true}//colspan即横跨的单元格数，这种情况下不用设置field和width
                ,{field: 'SJL', title: '收缴率', minWidth: 120,rowspan: 2,sort:true} //colspan即横跨的单元格数，这种情况下不用设置field和width
            ]
            ],
            //  展开的列配置
            openCols: [
                {field: 'desc', title: '描述信息'}
            ],
            done: function (res) {
                layer.closeAll('loading');
            }
        })
        /**
         * 关键词搜索树
         */
        form.on('submit(search)', function (obj) {
			var objone ={
				startDate:'',
				page:1,
				limit:20,
				principal_id:'',
				section_id:'',
				merchant_id:''
			}
			objone.principal_id = obj.field.principal_id
			objone.section_id = obj.field.section_id
			objone.merchant_id = obj.field.merchant_id
			// console.log(document.getElementById("quarts").style.display =="block",'22222');
			if(document.getElementById("quarts").style.display =="block"){
				if(obj.field.interest==0){
					var start = obj.field.test2
					objone.startDate = start+'-01'+'~'+start+'-03'
				}else if(obj.field.interest==1){
					var start = obj.field.test2
					objone.startDate = start+'-03'+'~'+start+'-06'
				}else if(obj.field.interest==2){
					var start = obj.field.test2
					objone.startDate = start+'-06'+'~'+start+'-09'
				}else if(obj.field.interest==3){
					var start = obj.field.test2
					objone.startDate = start+'-09'+'~'+start+'-12'
				}
			}else if(document.getElementById("mons").style.display =="block"){
				objone.startDate = obj.field.test1
			}else if(document.getElementById("yyds").style.display =="block"){
				objone.startDate =obj.field.test
			}
			
            lucky.CreateSearch(objone);
            return false;
        });
    });

</script>
{/block}
